<template>
  <div class="rightTop">
    <div class="header">最近一周发现隐患共98个</div>
    <div class="main shadow">
      <vue3-seamless-scroll :list="listData">
        <div v-for="(item,index) in listData" :key="index" class="item">
          <div class="left">{{index+1}}</div>
          <div class="right">
            <div>{{item.question}}</div>
            <div class="pd flex">
              <span class="flex-1">发现人：{{item.finder}}</span>
              <span class="flex-1">电话：{{item.phone}}</span>
              <span class="flex-1">{{item.time}}</span>
            </div>
            <div class="flex">
              <span class="flex-1">隐患等级：{{item.grade}}</span>
              <span class="flex-1">部门：{{item.department}}</span>
              <span class="flex-1">状态：{{item.status}}</span>
            </div>
          </div>
        </div>
      </vue3-seamless-scroll>
    </div>
  </div>
</template>

<script>
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
export default {
  components: {
    Vue3SeamlessScroll
  },
  setup(props) {
    let listData = [
      {
        question: "xxx问题",
        finder: "李四",
        phone: "13911111111",
        time: "2022-07-22 12:00:00",
        grade: "待评估",
        department: "电仪厂",
        status: "整改中"
      },
      {
        question: "xxx问题",
        finder: "李四",
        phone: "13911111111",
        time: "2022-07-22 12:00:00",
        grade: "待评估",
        department: "电仪厂",
        status: "整改中"
      },
      {
        question: "xxx问题",
        finder: "李四",
        phone: "13911111111",
        time: "2022-07-22 12:00:00",
        grade: "待评估",
        department: "电仪厂",
        status: "整改中"
      },
      {
        question: "xxx问题",
        finder: "李四",
        phone: "13911111111",
        time: "2022-07-22 12:00:00",
        grade: "待评估",
        department: "电仪厂",
        status: "整改中"
      },
      {
        question: "xxx问题",
        finder: "李四",
        phone: "13911111111",
        time: "2022-07-22 12:00:00",
        grade: "待评估",
        department: "电仪厂",
        status: "整改中"
      },
      {
        question: "xxx问题",
        finder: "李四",
        phone: "13911111111",
        time: "2022-07-22 12:00:00",
        grade: "待评估",
        department: "电仪厂",
        status: "整改中"
      },
      {
        question: "xxx问题",
        finder: "李四",
        phone: "13911111111",
        time: "2022-07-22 12:00:00",
        grade: "待评估",
        department: "电仪厂",
        status: "整改中"
      },
      {
        question: "xxx问题",
        finder: "李四",
        phone: "13911111111",
        time: "2022-07-22 12:00:00",
        grade: "待评估",
        department: "电仪厂",
        status: "整改中"
      }
    ];
    return { listData };
  }
};
</script>
<style lang="scss" scoped>
.rightTop {
  color: #fff;
  font-size: 14px;
  height: 100%;
  box-sizing: border-box;
  .header {
    height: 25px;
    box-sizing: border-box;
    padding-bottom: 5px;
  }
  .main {
    overflow: hidden;
    height: calc(100% - 25px);
    .item {
      display: flex;
      align-items: center;
      padding: 3px 5px;
      color: #fff;
      height: 80px;
      .left {
        width: 30px;
        line-height: 70px;
        text-align: center;
        border-right: 1px solid #fff;
      }
      .right {
        padding-left: 10px;
        width: 100%;
        .pd {
          padding: 5px 0;
        }
      }
    }
    .item:nth-child(even) {
      background: #0076a149;
    }
  }
}
</style>
